<template>
  <div>
    <head-top v-if="hide=='yes'" goBack="true"></head-top>
    <div v-if="hide=='yes'" class="newPlaceholder"></div>

    <none-list v-if="hasItem" text="购物车空空如也" icon="icon-gouwuche-copy">
      <button slot="btn" @click="goPage('/classifyIndex')" class="btn btn-primary">挑选礼品</button>
    </none-list>
    <div>
      <div class="goods-item flexLeft" v-for="(item,index) in shopcartlist" v-bind:key="item.Id">
        <div class="checkbox" @click="clickme(index)">
          <input
            type="checkbox"
            true-value="true"
            false-value="false"
            v-model="item.CkeckVal"
          >
          <label :for="item.Id"></label>
        </div>
        <div class="item-con">
          <div class="item-first flexLeft" @click="clickme(index)">
            <img :src="item.GiftImg" alt>
            <div>
              <p class="product-name">{{item.GiftName}}</p>
              <p class="brand-name">分类：{{item.GiftTypeName}}</p>
            </div>
          </div>
          <div class="item-second">
            <span>市场价：{{item.GiftMarketPrice}}</span>
          </div>
          <div class="item-third flexBetween">
            <div>
              <span>{{item.IntegralValue}}</span>
              <span>积分</span>
            </div>
            <div>
              <span v-on:click="minus(item.Id,index)" class="iconfont icon-jianhao1"></span>
              <span>{{item.GiftNum}}</span>
              <span @click="add(item.Id,index)" class="iconfont icon-jiahao1"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="placeholder-footer"></div>
      <div class="calc-con flexBetween" :class="{'hide':hide=='yes'}">
        <div class="flexCenter">
          <div style="width: 22px;height: 22px;margin-left: 20px" @click="selectAllBox" class="checkbox">
            <input type="checkbox" true-value="true" false-value="false" v-model="isAll">
            <label for="item"></label>
          </div>
          <label class="getAll" for="item">全选</label>
        </div>
        <div class="calc-money flexCenter">
          <span>合计：</span>
          <span>{{totalintegralvalue}}</span>
          <span>&nbsp;&nbsp;积分</span>
        </div>
        <button @click="gosettlement" class="btn calc-over flexCenter">结算</button>
      </div>
      <foot-guide v-if="hide!='yes'"></foot-guide>
      <!--<transition name="loading">-->
      <!--<loading v-show="showLoading"></loading>-->
      <!--</transition>-->
    </div>

  </div>
</template>

<script>
  import footGuide from "src/components/footer/footGuide";
  import headTop from "src/components/header/newHead";
  import noneList from "./noneData";
  import loading from "../../components/common/loading";
  import {Toast} from "mint-ui";
  import {getStore} from "../../config/mUtils";
  import {MessageBox} from "mint-ui";

  export default {
    name: "shopCar-index",
    data() {
      return {
        headTitle: "购物车",
        showLoading: true,
        hasItem: false,
        isAll: false,
        shopcartlist: [],
        totalintegralvalue: 0,
        selectednum: 0,
        cartids: [],
        cartidsstr: "",
        hide: 'no'
      };
    },
    components: {
      noneList,
      footGuide,
      headTop,
      loading
    },
    methods: {
      goPage(path) {

        this.$router.push(
          {
            path: path
          }
        )
      },
      selectAllBox() {
        if (!this.isAll) {
          this.shopcartlist.forEach(element => {
            element.CkeckVal = true;
          });
        } else {
          this.shopcartlist.forEach(element => {
            element.CkeckVal = false;
          });
        }
        this.totalAmountCalculation();
      },//全选
      getshopcartlist() {
        this.$axios
          .get("integral.user.getshopcartlist", {
            params: {
              userid: this.userinfo.Id
            }
          })
          .then(p => {
            this.showLoading = false;
            this.shopcartlist = p.data.result;
            if (this.shopcartlist.length > 0) {
              this.hasItem = false;
            } else {
              this.hasItem = true;
            }
          });
      }, //获取购物车列表
      minus(id, index) {
        if (this.shopcartlist[index].GiftNum - 1 > 0) {
          this.showLoading = true;
          this.$axios
            .post("integral.user.shopcart.addorminus", {
              Id: id,
              GiftNum: 1,
              DealType: "Minus"
            })
            .then(p => {
              if (p.data.status == "10001") {
                this.showLoading = false;
                this.shopcartlist[index].GiftNum =
                  Number(this.shopcartlist[index].GiftNum) - 1;
                this.totalAmountCalculation();
              } else {
                Toast({
                  message: "很抱歉亲~，网络出现错误",
                  iconClass: "iconfont icon-cuo",
                  duration: 1000
                });
              }
            });
        } else {
          MessageBox.confirm("已达到最小数量,是否自动移除该项?").then(action => {
            this.showLoading = true;
            this.$axios.post("integral.shopcart.delete", [id]).then(p => {
              if (p.data.status == "10001") {
                this.showLoading = false;
                this.shopcartlist.splice(index, 1);
                if (this.shopcartlist.length > 0) {
                  this.hasItem = false;
                } else {
                  this.hasItem = true;
                }
                this.totalAmountCalculation();
              } else {
                Toast({
                  message: "很抱歉亲~，网络出现错误",
                  iconClass: "iconfont icon-cuo",
                  duration: 1000
                });
              }
            });
          }).catch(() => {
          });
        }
      },//加
      add(id, index) {
        this.showLoading = true;
        this.$axios
          .post("integral.user.shopcart.addorminus", {
            Id: id,
            GiftNum: 1,
            DealType: "Add"
          })
          .then(p => {
            if (p.data.status == "10001") {
              this.showLoading = false;
              this.shopcartlist[index].GiftNum =
                Number(this.shopcartlist[index].GiftNum) + 1;
              this.totalAmountCalculation();
            } else {
              Toast({
                message: "很抱歉亲~，网络出现错误",
                iconClass: "iconfont icon-cuo",
                duration: 1000
              });
            }
          });
      },//减
      clickme(index) {
        this.shopcartlist[index].CkeckVal = !this.shopcartlist[index].CkeckVal;
        this.totalAmountCalculation();
      },//单选
      totalAmountCalculation() {
        this.totalintegralvalue = 0;
        this.selectednum = 0;
        this.cartids = [];
        this.cartidsstr = "";
        this.shopcartlist.forEach(element => {
          if (element.CkeckVal) {
            this.cartids.push(element.Id);//添加已勾选的礼品ID
            this.cartidsstr = this.cartids.join(',');
            this.totalintegralvalue += element.IntegralValue * element.GiftNum;
            this.selectednum++;
          }
        });
        if (this.selectednum == this.shopcartlist.length) {
          this.isAll = true;
        } else {
          this.isAll = false;
        }
      }, //合计总积分
      gosettlement() {
        if (this.selectednum > 0) {
          this.$router.push({path: '/exchange', query: {'cartids': this.cartidsstr}});
        } else {
          Toast({
            message: "您还没有选择宝贝哦~",
            iconClass: "iconfont icon-cuo",
            duration: 1000
          });
        }
      }
    },
    created() {
      this.userinfo = getStore("userInfo");
      this.getshopcartlist();
      this.hide = this.$route.query.hide
    },
    mounted() {
    }
  };
</script>

<style lang="scss" scoped>

  .placeholder-footer {
    width: 100%;
    height: 4.5rem;
  }

  .empty {
    .iconfont {
      font-size: 2.13rem;
      color: #bfbfbf;
    }
  }

  .goods-item {
    padding: 0.3rem 0.6rem;
    background: white;
    margin-bottom: 0.3rem;

    .item-con {
      flex: 1;
    }

    .item-first {
      img {
        width: 3.41rem;
        border-radius: 0.17rem;
        margin-right: 0.85rem;
      }

      .product-name {
        font-size: 0.6rem;
      }

      .brand-name {
        font-size: 0.51rem;
        color: #888888;
      }
    }

    .item-second {
      span {
        color: rgba(136, 136, 136, 1);
        font-size: 0.51rem;
      }
    }

    .item-third {
      div:nth-child(1) {
        span:nth-child(1) {
          color: rgba(251, 93, 87, 1);
          font-size: 0.77rem;
        }

        span:nth-child(2) {
          color: rgba(16, 16, 16, 0.4);
          font-size: 0.51rem;
        }
      }

      div:nth-child(2) {
        span:nth-child(1) {
          color: #ddd;
          font-size: 0.8rem;
        }

        span:nth-child(2) {
          color: rgba(16, 16, 16, 0.4);
          font-size: 0.77rem;
        }

        span:nth-child(3) {
          color: #3190e8;
          font-size: 0.9rem;
        }
      }
    }
  }

  .calc-con {
    width: 100%;
    height: 1.92rem;
    position: fixed;
    bottom: 2.2rem;
    background: white;

    .getAll {
      color: rgb(16, 16, 16);
      font-size: 0.6rem;
      text-align: center;
    }

    .calc-money {
      span {
        color: rgb(16, 16, 16);
        font-size: 0.51rem;
        text-align: center;
      }

      span:nth-child(2) {
        color: #e51c23;
        font-size: 0.68rem;
        text-align: center;
      }

      span:nth-child(3) {
        color: #101010;
        font-size: 0.51rem;
        text-align: center;
      }
    }

    .calc-over {
      width: 5.12rem;
      height: 100%;
      background-color: rgba(251, 93, 87, 1);
      color: white;
      font-size: 0.6rem;
      text-align: center;
    }
  }

  .hide {
    bottom: 0;
  }
</style>
